import "./App.css";
import React from "react";
// 通用组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  // getDerivedStateFromError

  // 发生错误的时候触发
  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 在这里可以选择 把错误进行上报
    // ajax.post(`http://www.xxxxxx.com`,error)
    console.log(error, errorInfo);
  }

  render() {
    // throw "自身模拟报错";

    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
class HomeChild extends React.Component {
  render() {
    // throw "模拟报错";

    return <h1>HomeChild</h1>;
  }
}
class Home extends React.Component {
  handleClick = () => {
    try {
      throw "模拟报错";
    } catch (e) {
      alert(e, "error");
      // 进行错误信息上报
    }
  };
  render() {
    // throw "模拟报错";
    return (
      <div onClick={this.handleClick}>
        Home
        <HomeChild />
      </div>
    );
  }
}
// 错误边界组件，可以捕捉到所有的子节点发生的错误，除了4种情况
// 1. 事件处理（了解更多）
// 2. 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
// 3. 服务端渲染
// 4. 它自身抛出来的错误（并非它的子组件）

// ErrorBoundary可以整个项目发一个，也可以一个页面发一个，控制力度自己定
function App() {
  return (
    <div className="App">
      <ErrorBoundary>
        <Home />
      </ErrorBoundary>
    </div>
  );
}

export default App;
